class DisplayMessages extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: "",
            messages: []
        };
    }
    // 请把 handleChange()、submitMessage() 写在这里
    handleChange(e) {
        const { value } = e.target;
        this.setState({ input: value });
    }
    submitMessage() {
        this.setState({
            messages: [...this.state.messages, this.state.input],
            input: ""
        });
    }
    render() {
        return (
            <div>
                <h2>键入新 Message</h2>
                {/* 在此渲染 input、button、ul*/}
                <input
                    type="text"
                    value={this.state.input}
                    onChange={e => this.handleChange(e)}
                />
                <button onClick={e => this.submitMessage()}>Add message</button>
                <ul>
                    {this.state.messages.map(msg => (
                        <li key={msg}>{msg}</li>
                    ))}
                </ul>
                {/* 请在本行以上添加你的代码 */}
            </div>
        );
    }
}
